<p style="margin:20px;padding-left: 200px;">
    <input type="hidden" name="location" value="{$location}"> 请输入地址:
    <input class="layui-iuput" style="width:300px;padding:3px 4px;" type="text" id="place" />
</p>
<div id="container" style="min-width:100%;min-height:450px;"></div>
<div class="layui-form-item" style="padding-left:230px;padding-top: 20px;">
    <div class="layui-input-block">
        <button type="button" id="save" class="layui-btn" lay-submit lay-filter="formDemo">保存当前位置</button>
    </div>
</div>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&libraries=place"></script>
<script src="__STATIC_LIB__layui/layui.js"></script>
<link rel="stylesheet" href="__STATIC_LIB__layui/css/layui.css">
<script>
    layui.use('layer', function() {
        var $ = layui.$,
            layer = layui.layer;
        var cityLocation, map, marker, center = null;
        var markerImage = "http://api.map.baidu.com/images/marker_red_sprite.png";
        var preLocationCenter = $("input[name=location]").val();
        createMap(preLocationCenter);


        // 获取当前定位城市 以当前定位城市中心创建
        function createMap(location) {
            if (!location) {
                cityLocation = new qq.maps.CityService({
                    complete: function(res) {
                        center = new qq.maps.LatLng(res.detail.latLng.lat, res.detail.latLng.lng);
                        setMap(center);
                    }
                });
                cityLocation.searchLocalCity();
            } else {
                var arr = location.split(',');
                if (arr.length < 2) {
                    parent.layer.msg("坐标位置错误");
                    return false;
                }
                center = new qq.maps.LatLng(arr[0], arr[1]);
                setMap(center);
            }
        }


        // 加载地图资源
        function setMap(center) {
            map = new qq.maps.Map(document.getElementById('container'), {
                center: center,
                zoom: 12
            });

            var size = new qq.maps.Size(20, 27);
            var origin = new qq.maps.Point(0, 0);
            var icon = new qq.maps.MarkerImage(markerImage, size, origin);
            //创建一个Marker
            marker = new qq.maps.Marker({
                icon: icon,
                position: center,
                animation: qq.maps.MarkerAnimation.DOWN,
                map: map,
                title: '选择位置'
            });

            var jump = function(event) {
                marker.setPosition(event.latLng);
            };
            qq.maps.event.addListener(map, 'click', jump);

            //搜索框提示
            var ap = new qq.maps.place.Autocomplete(document.getElementById('place'));
            //调用Poi检索类。用于进行本地检索、周边检索等服务。
            var searchService = new qq.maps.SearchService({
                map: map
            });
            //添加监听事件
            qq.maps.event.addListener(ap, "confirm", function(res) {
                searchService.search(res.value);
            });

        }

        $("#save").on('click', function() {
            parent.$("input[name=website_location]").val(marker.position.lat + ',' + marker.position.lng);
            parent.layer.closeAll();
        });

    });
</script>
</script>